<template>
  <div>
    <el-dialog v-if="enable" title="任务编辑" :visible.sync="enable">
      <el-form ref="form" label-width="80px" :model="model" :rules="rules">
        <el-form-item label="时间类型">
          <el-radio-group v-model="model.timeType">
            <el-radio-button label="day">每天</el-radio-button>
            <el-radio-button label="week">每周</el-radio-button>
            <el-radio-button label="month">每月</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="'week' == model.timeType" label="每周">
          <el-select v-model="model.day" placeholder="请选择" multiple style="width:100%">
            <el-option v-for="(name,value) in weekday" :key="value" :label="name" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="'month' == model.timeType" label="月份">
          <el-select v-model="model.month" placeholder="请选择" multiple style="width:100%">
            <el-option v-for="(name,value) in monthlist" :key="value" :label="name" :value="value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="'month' == model.timeType" label="日期">
          <el-select v-model="model.date" placeholder="请选择" multiple style="width:100%">
            <el-option v-for="num of 31" :key="num" :label="num" :value="num"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行时间" required>
          <el-col :span="11">
            <el-form-item prop="hour">
              <el-select v-model="model.hour" placeholder="请选择小时" multiple style="width:100%">
                <el-option label="每小时" value="*"></el-option>
                <el-option v-for="num of 24" :key="num" :label="num-1" :value="num-1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="1" style="text-align:center;"> : </el-col>
          <el-col :span="12">
            <el-form-item prop="minute">
              <el-select v-model="model.minute" placeholder="请选择分钟" multiple style="width:100%">
                <el-option label="每分钟" value="*"></el-option>
                <el-option v-for="num of 60" :key="num" :label="num-1" :value="num-1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="指令" prop="cmd">
          <el-input type="textarea" :rows="2" v-model="model.cmd"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="model.comment"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="enable = false">取 消</el-button>
        <el-button type="primary" @click="saveTask">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import CrontabParser from './CrontabParser.js';
export default {
    data() {
        return {
            client : null,
            model : {timeType:'day'},
            enable : false,
            weekday : {1:'周一',2:'周二',3:'周三',4:'周四',5:'周五',6:'周六',0:'周日'},
            monthlist : {1:'一月',2:'二月',3:'三月',4:'四月',5:'五月',6:'六月',7:'七月',8:'八月',9:'九月',10:'十月',11:'十一月',12:'十二月'},
            actResolve : null,
            actReject : null,
            rules:{
                cmd : {required: true, message: '请输入执行指令', trigger: 'blur'},
                hour : {required: true, message: '请选择执行时间小时', trigger: 'blur'},
                minute : {required: true, message: '请选择执行时间分钟', trigger: 'blur'},
            },
        };
    },
    methods : {
        /** 打开 */
        open() {
            let $this = this;
            return new Promise(( resolve, reject ) => {
                $this.actResolve = resolve;
                $this.actReject = reject;
                $this.enable = true;
                $this.model = {timeType:'day'};
            });
        },

        /** 更新任务 */
        async saveTask() {
            try {
                await this.$refs.form.validate();
            } catch {
                return;
            }

            let cmd = [];
            cmd.push(this.model.minute);
            cmd.push(this.model.hour);
            switch ( this.model.timeType ) {
            case 'day' : this.model.date = this.model.month = this.model.day = '*'; cmd.push('* * *'); break;
            case 'week' : this.model.date = this.model.month = '*'; cmd.push(`* * ${this.model.day}`);break;
            case 'month' : this.model.day = '*'; cmd.push(`${this.model.month} ${this.model.date} *`); break;
            }
            cmd.push(this.model.cmd);
            cmd = cmd.join(' ');
            this.enable = false;
            
            this.model.minute = this.model.minute + '';
            this.model.hour = this.model.hour + '';
            this.model.date = this.model.date + '';
            this.model.month = this.model.month + '';
            this.model.day = this.model.day + '';
            let crontabParser = new CrontabParser('');
            crontabParser.parseReadableTime(this.model);
            this.actResolve({
                timeReadable : this.model.timeReadable,
                comment : this.model.comment,
                cmd : this.model.cmd,
                defination : cmd,
            });
        }
    },
}
</script>